<template>
  <by-background />

  <by-navigation-bar :title="pageInfo.title" />

  <view class="padding-top-20 padding-lr-40">
    <input v-model="content" :type="pageInfo.type" class="text-30 input width-full padding-left-30" :placeholder="pageInfo.placeholder">

    <view class="margin-top-46 text-center">
      <text class="text-26 color-t2">{{pageInfo.tips}}</text>
    </view>
  </view>

  <by-bottom-button height="72rpx" font-size="32rpx" bold text="确 定" @click="handleChangeInfo" />
</template>

<script setup lang="ts">
import { updateInfo } from '@/common/api'
import { toast } from '@/common/util'
import { mobile } from '@/common/test'
import type { AnyObject } from '@/common/types'

interface IPageInfo{
  title?: string
  placeholder: string
  tips?: string
  value: 'nickname' | 'wxNo' | 'contactTel'
}
const pageInfos:IPageInfo[] = [
  {
    title: '昵称编辑',
    placeholder: '请输入昵称',
    tips: '输入你的昵称，昵称不能为空。',
    value: 'nickname'
  },
  {
    title: '微信编辑',
    placeholder: '请输入微信号',
    tips: '输入你的微信号，不能为空。',
    value: 'wxNo'
  },
  {
    title: '手机号编辑',
    placeholder: '请输入手机号',
    tips: '输入你的手机号，不能为空。',
    value: 'contactTel'
  }
]

const type = ref(-1)
const content = ref('')
const pageInfo = shallowRef<IPageInfo>({
  placeholder: '',
  value: 'nickname'
})

onLoad((e) => {
  const inx = type.value = parseInt(e?.type)
  pageInfo.value = pageInfos[inx]
})

async function handleChangeInfo() {
  if (!content.value) {
    toast(pageInfo.value.placeholder)
    return
  }
  if (type.value === 2 && !mobile(content.value)) {
    toast('手机号码不正确')
    return
  }
  const params:AnyObject = {}
  params[pageInfo.value.value] = content.value
  const log = await updateInfo(params)
  toast('修改成功，请等待审核')
}

</script>

<style scoped lang="scss">
@include setMargin(top, 46);

.input{
  height: 87rpx;
  background: #FFFFFF;
  border: 2rpx solid #D3D3D3;
  border-radius: 16rpx;
}
</style>
